<script setup>
  import { onMounted, ref } from 'vue'
  import { getMessageListAPI, getMessageReadAllAPI } from '@/apis/message'

  const noticeList = ref([])
  onMounted(() => {
    getNoticeList()
  })
  // 公告列表
  async function getNoticeList() {
    const { data, code } = await getMessageListAPI({
      contentType: 200,
      page: 1,
      pageSize: 5,
    })
    if (code !== 200) return uni.utils.toast('获取通知失败，稍后重试!')
    console.log(data.items)
    noticeList.value = data.items
  }
  //全部已读
  async function onReadAll() {
    await getMessageReadAllAPI(200)
  }
</script>
<template>
  <scroll-view class="scroll-view" refresher-enabled scroll-y>
    <view class="scroll-view-wrapper">
      <view class="message-action" @click="onReadAll">
        <text class="iconfont icon-clear"></text>
        全部已读
      </view>
      <uni-list :border="false">
        <uni-list-item
          v-for="item in noticeList"
          to="/subpkg_message/content/index"
          ellipsis="1"
          :key="item.id"
          :title="item.title"
          :rightText="item.created"
        >
          <template v-slot:header>
            <text v-if="item.isRead" class="dot"></text>
          </template>
        </uni-list-item>

        <uni-list-item
          v-for="item in noticeList"
          to="/subpkg_message/content/index"
          ellipsis="1"
          :key="item.id"
          :title="item.title"
          :rightText="item.created"
        >
          <template v-slot:header>
            <text v-if="item.isRead" class="dot"></text>
          </template>
        </uni-list-item>
      </uni-list>
    </view>
  </scroll-view>
</template>

<style lang="scss" scoped>
  @import './styles.scss';
</style>
